<template>
  <div>
    <van-nav-bar title="黑马头条-登陆" />
    <div>
      <van-form @submit="onSubmit">
  <van-field
    v-model="formLogin.mobile"
    type= "tel"
    name= "mobile"
    label="手机号"
    placeholder="请输入11位手机号"
    required
    :rules="[{ required: true, message: '请填写正确手机号', pattern: /^1[3-9]\d{9}$/}]"
  />
  <van-field
    v-model="formLogin.code"
    type="password"
    name= "code"
    label="密码"
    placeholder="请输入6位密码"
    required
    :rules="[{ required: true, message: '请填写正确密码', pattern: /^\d{6}$/ }]"
  />
  <div style="margin: 16px;">
    <van-button 
    round 
    block 
    type="info" 
    native-type="submit"
    :loading="isLoding"
    :disabled="isLoding"
    loading-text="登录中ing...">登录</van-button>
  </div>
</van-form>
    </div>
  </div>
</template>

<script>
import {loginApi} from '@/api/index'
import {setToken} from '@/utils/token'
import {Notify} from 'vant'
export default {
  data() {
    return {
     formLogin: {
      mobile: '18569457026',
      code: '246810' // 默认只能用246810后台规定
     },
     isLoding: false // 加载状态
    };
  },
  methods: {
    // 提交方法
   async onSubmit(values) {
      this.isLoding = true // 开启加载状态
     try{
         const res = await loginApi(this.formLogin)
         Notify({type: 'success',message: '登陆成功'}) 
         setToken(res.data.data.token)
         // 跳转一定要写在最后 -> 尽量最后执行
         // location.href -> 当前浏览器地址和要跳转的地址一样(不包含#后面描点信息) -> 不会刷新网页
         // 地址改变,就会导致网页刷新
         // this.$router.push() 压栈(会产生历史记录,可以回退), this.$router.replace() 替换(不会产生历史记录)
         this.$router.replace({
          path: '/layout/home' // 因为我们路由规则里/layout里没有重定向,所以地址要写全
         })
     } catch {
        // Promise内ajax抛出错误直接进入这里
        Notify({type: 'danger',message: '账号密码错误,请检查!'})
     }
     this.isLoding = false // 网络请求完成无论成功/报错,把状态关掉
    },
  },
}
</script>

<style scoped lang="less">
  /* 此类名是van-nav-bar组件内根标签 */
  .van-nav-bar {
    background-color: #007bff;
  }
  /* 此选择器名字是van-nav-bar组件内标签scoped尝试把此选择器后属性选择器匹配当前页面标签(选不中组件内部的) */
  // lang="less" 当前style标签内是less语法
  // /deep/ 会把属性选择器加到前面(用后代选择器的方式取款找匹配的类名)
  // 结论：要修改组件内样式,如果你用了scoped,就需要在选择器前/deep/即可
  /deep/ .van-nav-bar__title {
    color: white;
  }
</style>